<template>
	<div class="spdetail pgroot">
		<header>
			<i class="fa fa-angle-left spback" @click='back'></i>
			<h2>商家详情</h2>
		</header>
		<div class="con">
			<section>
				<h3>活动与属性</h3>
				<div class="activitie fix">
					<p v-for="(act, ind) in shops.activities">
						<i class="icname">{{act.icon_name}}</i> {{act.description}}(app专享)
					</p>
				</div>
			</section>
			<section>
				<h3 class="fix">食品监督安全公示 <span class="qulifity r">企业认证详情
					<i class="fa fa-angle-right"></i></span></h3>
				<div class="qulicon">
					<img src="../../static/img/order.png" alt="" />
					<div>
						<p>监督检查结果：<span style="color: rgb(126, 211, 33);">良好</span></p>
						<p>检查日期：<span>2016年1月1号</span></p>
					</div>
				</div>
			</section>
			<section>
				<h3 class="fix">商家信息 <span class="qulifity r">企业认证详情<i class="fa fa-angle-right"></i></span></h3>
				<div class="sellermsg">
					<!--<p>地址：{{spdetail.address}}</p>-->
					<p>营业时间：[ "00:00-04:45", "05:15-10:15", "10:30-23:00" ]
					</p>
					<p>
						营业执照<i class="fa fa-angle-right r"></i>
					</p>
					<p>
						餐饮服务许可证<i class="fa fa-angle-right r"></i>
					</p>
				</div>
			</section>
		</div>
	</div>
</template>

<script>
	import { Cell, Group } from 'vux'
	export default {
		name: 'spdetail',
		components: {
			Group,
			Cell
		},
		methods: {
			back() {
				window.history.back();
			}
		},
		data() {
			return {
				shops: ''
			}
		},
	
		created() {
			this.$http.get("/ele/shopping/restaurant/" + this.$route.params.id + "?extras[]=activities&terminal=h5", {
				params: {
					latitude: 31.23037,
					longitude: 121.473701,
				}
			}).then(function(res) {

				this.shops = res.data;

			}.bind(this))
		},

		mounted() {
			console.log('进入详情页面')
		}

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.spdetail {
		width: 100%;
		height: 100%;
		background: #EEEEEE;
	}
	
	header {
		color: white;
		text-align: center;
		background: #2196F3;
		position: relative;
		font-size: 1.2rem;
	}
	
	.spback {
		position: absolute;
		padding: 0 20px;
		left: 0px;
		bottom: 0;
		top: 0;
		line-height: 2.5rem;
	}
	
	header h2 {
		font-size: 1.2rem;
		margin: 0;
		height: 2.5rem;
		line-height: 2.5rem;
	}
	
	.con section {
		background: white;
		margin-top: 0.6rem;
	}
	
	.con div {
		padding: 0px 15px;
		font-size: 0.8rem;
	}
	
	h3 {
		font-weight: normal;
		border-bottom: 1px solid #eee;
		height: 2.5rem;
		line-height: 2.5rem;
		padding-left: 15px;
		margin: 0;
		font-size: 0.9rem;
	}
	
	.icname {
		font-style: normal;
		background-color: rgb(112, 188, 70);
		border-color: rgb(112, 188, 70);
		font-size: 0.79rem;
		color: white;
	}
	
	.qulifity {
		color: #ccc;
		float: right;
	}
	
	.qulifity i {
		padding-left: 0.3rem;
		padding-right: 1rem;
	}
	
	.qulicon {
		display: flex;
		align-items: center;
	}
	.sellermsg p:not(:first-child){
		border-top: 1px solid #ddd;	
	}
	.sellermsg p{
		margin: 0;
		padding: 1rem 0;
	}
	.sellermsg p i{
		padding: 0 1rem;

	}
</style>